<template>
  <div>
    <h2>ShowInfo: {{ info }}</h2>
    <!-- 代码没有错误, 但是违背规范(单项数据流) -->
    <button @click="info.name = 'kobe'">ShowInfo按钮</button>
    <!-- 正确的做法: 符合单项数据流-->
    <button @click="showInfobtnClick">ShowInfo按钮</button>
    <hr />
    <!-- 使用readonly的数据 -->
    <h2>ShowInfo: {{ roInfo }}</h2>
    <!-- 代码就会无效(报警告) -->
    <!-- <button @click="roInfo.name = 'james'">ShowInfo按钮</button> -->
    <!-- 正确的做法 -->
    <button @click="roInfoBtnClick">roInfo按钮</button>
  </div>
</template>

<script>
export default {
  props: {
    // reactive数据
    info: {
      type: Object,
      default: () => ({}),
    },
    // readonly数据
    roInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['changeInfoName', 'changeRoInfoName'],
  setup(props, context) {
    function showInfobtnClick() {
      console.log(context)//content上下文
      console.log(props.info.name)
      console.log(props.info.age)
      console.log(props.info.height)
      context.emit('changeInfoName', 'kobe')
    }

    function roInfoBtnClick() {
      context.emit('changeRoInfoName', 'james')
    }

    return {
      showInfobtnClick,
      roInfoBtnClick,
    }
  },
}
</script>

<style scoped></style>
